<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>登录页面</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- basic styles -->

    <link href="__STATIC__/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="__STATIC__/css/font-awesome.min.css" />

    <!--[if IE 7]>
    <link rel="stylesheet" href="__STATIC__/css/font-awesome-ie7.min.css" />
    <![endif]-->

    <!-- page specific plugin styles -->

    <!-- fonts -->



    <!-- ace styles -->

    <link rel="stylesheet" href="__STATIC__/css/ace.min.css" />
    <link rel="stylesheet" href="__STATIC__/css/ace-rtl.min.css" />

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="__STATIC__/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script src="__STATIC__/js/html5shiv.js"></script>
    <script src="__STATIC__/js/respond.min.js"></script>
    <![endif]-->
    <!-- basic scripts -->



    <!--[if !IE]> -->

    <script type="text/javascript">
        window.jQuery || document.write("<script src='__STATIC__/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
    </script>

    <!-- <![endif]-->

    <!--[if IE]>
    <script type="text/javascript">
        window.jQuery || document.write("<script src='__STATIC__/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
    </script>
    <![endif]-->

    <script type="text/javascript">
        if("ontouchend" in document) document.write("<script src='__STATIC__/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
    </script>

    <script src="__STATIC__/js/bootstrap.min.js"></script>
    <script src="__STATIC__/js/bootbox.min.js"></script>
    <!-- inline scripts related to this page -->




</head>

<body class="login-layout">
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="center">
    <h1>
        <i class="icon-leaf green"></i>
        <span class="red">ThinkBoot</span>
        <span class="white">管理系统</span>
    </h1>
    <h4 class="blue">&copy;   聚优莆田</h4>
</div>

<div class="space-6"></div>

<div class="position-relative">
    <div id="login-box" class="login-box visible widget-box no-border">
        <div class="widget-body">
            <div class="widget-main">
                <h4 class="header blue lighter bigger">
                    <i class="icon-coffee green"></i>
                    请输入您的账号信息
                </h4>


                <div class="space-6"></div>

                <form>
                    <fieldset>
                        <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" name="username"  class="form-control" id="username" placeholder="用户名" />
															<i class="icon-user"></i>
														</span>
                        </label>

                        <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" name="password" class="form-control" id="password" placeholder="密码" />
															<i class="icon-lock"></i>
														</span>
                        </label>
                        <label class="block clearfix ">

                            <input type="text" id="code" name="code" class="input-medium" placeholder="验证码" />
                            <span ><img id="code_img" align="top" onclick="changeCode()" src="<{:U('Public/code?code_len=4&font_size=14&width=100&height=28&code='.time())}>" title="点击切换验证码"></span>

                        </label>

                        <div class="space"></div>

                        <div class="clearfix">
                            <label class="inline">
                                <input type="checkbox" name="memberme" class="ace" />
                                <span class="lbl"> 记住我</span>
                            </label>

                            <button type="button" id="btnLogin" class="width-35 pull-right btn btn-sm btn-primary">
                                <i class="icon-key"></i>
                                     登录
                            </button>
                        </div>

                        <div class="space-4"></div>
                    </fieldset>
                </form>


            </div><!-- /widget-main -->


        </div><!-- /widget-body -->
    </div><!-- /login-box -->


</div><!-- /position-relative -->
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
<script type="text/javascript">
    jQuery(function(){
        //alert("ff");

        $('input:text:first').focus();
        $('form').keyup(function(event){
            if(event.keyCode ==13){
                login();
            }
        });
        $("#btnLogin").click(function(){
            login();
        });
    });
    function show_box(id) {
        jQuery('.widget-box.visible').removeClass('visible');
        jQuery('#'+id).addClass('visible');
    }
    var changeCode = function(){
        var that = document.getElementById('code_img');
        that.src = that.src + '&' + Math.random();
    }
    var login=function(){
        if(!$('#username').val()){
            bootbox.alert({
                message: "请输入用户名！",

            });
            $('#username').focus();
            return false;
        }

        if(!$('#password').val()){

            bootbox.alert({
                message: "请输入密码！",

            });
            $('#password').focus();
            return false;
        }
        if(!$('#code').val()){

            bootbox.alert({
                message: "请输入验证码！",

            });
            $('#code').focus();
            return false;
        }
        $.post('<{:U('Public/login')}>', $("form").serialize(), function(data){
            if(!data.status){
                bootbox.alert({
                    message: data.info

                });

                changeCode();
            }else{
                window.location.href = data.url;
            }
        },'json');
    }
</script>


</body>
</html>
